<template>
	<view :class="vi_pageSize">
		<vi-notify :top="topfix" ref="vi_notify"></vi-notify>
		<module-loading ref="vi_loading" :loading="vi_loading" :loadingMask="vi_loadingMask"></module-loading>
		<vi-headbar goback>
			<view slot="right">
				响应式
				<text class="response">开启</text>
				<text class="noresponse color-warning">关闭</text>
			</view>
			{{vi_pageTitle}}
		</vi-headbar>
		<view class="docTable">
			<view class="th">
				<view>属性名</view>
				<view>类型</view>
				<view>默认值</view>
				<view>描述</view>
			</view>
			<view class="tr">
				<view>type</view>
				<view>String</view>
				<view>primary</view>
				<view>主题色。全局默认，节点设置优先</view>
			</view>
			<view class="tr">
				<view>color</view>
				<view>String</view>
				<view>无</view>
				<view>自定义主题色。全局默认，节点设置优先</view>
			</view>
			<view class="tr">
				<view>textColor</view>
				<view>String</view>
				<view>无</view>
				<view>固定文字。全局默认，节点设置优先</view>
			</view>
			<view class="tr">
				<view>mode</view>
				<view>String</view>
				<view>left</view>
				<view>基础排列模式。left轴线居左、right轴线居右、across内容交错</view>
			</view>
			<view class="tr">
				<view>useGroup</view>
				<view>Boolean</view>
				<view>false</view>
				<view>使用组，开启与否取决于数据集是否带有组结构</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>groupMode</view>
					<view>Boolean, String</view>
					<view>false</view>
					<view>组节点类型。分为预定义类型和custom自定义类型</view>
				</view>
				<view class="appendix">
					预定义类型，节点时间值必须，依据时间值重排序然后根据类型插入组节点
					<view class="">
						year：以年为单位，插入年显示值
					</view>
					<view class="">
						month：以月为单位，插入月显示值
					</view>
					<view class="">
						day：以天为单位，插入天显示值
					</view>
					<view class="">
						hour：以小时为单位，插入小时显示值
					</view>
					<view class="mt-e0p5">
						自定义类型使用数据集上的内定字段数据显示(包括主题色、镂空、圆角等)，节点时间值非必须。如果未开启useGroup则不能使用
					</view>
				</view>
			</view>
			<view class="tr">
				<view>groupType</view>
				<view>String</view>
				<view>无</view>
				<view>组节点主题色，对组节点类型为预定义类型的补充</view>
			</view>
			<view class="tr">
				<view>groupColor</view>
				<view>String</view>
				<view>无</view>
				<view>组节点自定义主题色，对组节点类型为预定义类型的补充</view>
			</view>
			<view class="tr">
				<view>groupTextColor</view>
				<view>String</view>
				<view>无</view>
				<view>组节点固定文字色，对组节点类型为预定义类型的补充</view>
			</view>
			<view class="tr">
				<view>groupRadius</view>
				<view>String, Number, Array</view>
				<view>0.25em</view>
				<view>组节点圆角，对组节点类型为预定义类型的补充</view>
			</view>
			<view class="tr">
				<view>groupPlain</view>
				<view>Boolean</view>
				<view>false</view>
				<view>组节点镂空，对组节点类型为预定义类型的补充</view>
			</view>
			<view class="tr">
				<view>atom</view>
				<view>String</view>
				<view>datetime</view>
				<view>节点时间值颗粒度，影响时间值的显示格式。可选值year、month、day、hour、minute、second、datetime。其他值当做时间格式字符串对时间值处理</view>
			</view>
			<view class="tr">
				<view>sort</view>
				<view>String</view>
				<view>无</view>
				<view>节点排序。asc升序，desc降序，为空不排序，使用自定义组节点时不排序。使用预定义组节点时必定排序，默认升序</view>
			</view>
			<view class="tr">
				<view>dataList</view>
				<view>Array</view>
				<view>无</view>
				<view>数据集，详情见下方</view>
			</view>
			<view class="tr">
				<view>lineSpace</view>
				<view>Number</view>
				<view>1.5</view>
				<view>线与左右内容的间距，固定单位em</view>
			</view>
			<view class="tr">
				<view>rowSpace</view>
				<view>Number</view>
				<view>0.75</view>
				<view>内容行间、组节点与内容行距离，固定单位em</view>
			</view>
			<view class="tr">
				<view>timeAside</view>
				<view>Boolean</view>
				<view>false</view>
				<view>时间显示是否置于轴线对侧，开启后将向内容模板传入关闭时间显示的参数</view>
			</view>
			<view class="tr">
				<view>asideWidth</view>
				<view>Number</view>
				<view>4</view>
				<view>对侧时间显示宽度，固定单位em</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>keys</view>
					<view>Object</view>
					<view></view>
					<view>数据键名设置，同时向内传递至内容模板，替换内容模板的键名</view>
				</view>
				<view class="appendix">
					<view class="">
						groupName: 组标题键名
					</view>
					<view class="">
						groupChildren：节点列表所在键名
					</view>
					<view class="">
						itemName：节点标题键名
					</view>
					<view class="">
						itemTime：节点时间值键名
					</view>
					<view class="">
						itemContent：节点正文，内容模板用
					</view>
				</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>icon</view>
					<view>Object</view>
					<view></view>
					<view>iconfont图标数据覆盖</view>
				</view>
				<view class="appendix">
					格式：{key:"图标名"}
					<view>node：icon-point 默认节点</view>
				</view>
			</view>
			<view class="tr">
				<view>template</view>
				<view>String</view>
				<view>common</view>
				<view>内容模板名。内置common通用模板、card卡片带图标模板。其他模板可在组件中自行定义</view>
			</view>
			<view class="tr">
				<view>templateSet</view>
				<view>Object</view>
				<view>无</view>
				<view>模板设置，向内容模板传递，详情见下方</view>
			</view>
			<view class="tr">
				<view>iconBgColor</view>
				<view>String</view>
				<view>#fff</view>
				<view>图标背景色，用于图标边缘覆盖轴线，应等于外部背景色。不需要时可设为transparent</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>groupFormat</view>
					<view>Object</view>
					<view>无</view>
					<view>组节点时间显示格式替换。用于预定义组节点</view>
				</view>
				<view class="appendix">
					<view class="">year: "YYYY"</view>
					<view class="">month: "MM"</view>
					<view class="">day: "DD"</view>
					<view class="">hour: "h:00"</view>
				</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>nodeFormat</view>
					<view>Object</view>
					<view>无</view>
					<view>节点时间显示格式替换，关联于atom</view>
				</view>
				<view class="appendix">
					<view class="">year: "YYYY"</view>
					<view class="">month: "YYYY-MM"</view>
					<view class="">day: "MM-DD"</view>
					<view class="">hour: "h:00"</view>
					<view class="">minute: "hh:mm"</view>
					<view class="">second: "hh:mm:ss"</view>
					<view class="">datetime: "YYYY-MM-DD hh:mm"</view>
				</view>
			</view>
			<view class="tr">
				<view>@click</view>
				<view>事件</view>
				<view></view>
				<view>节点点击事件，提交一个参数对象，包含type节点类型，tiem节点数据对象</view>
			</view>
			<view class="tr">
				<view>@event</view>
				<view>事件</view>
				<view></view>
				<view>内容模板触发的点击事件传递，提交一个参数对象，包含type点击的类型，tiem节点数据对象</view>
			</view>
		</view>
		
		<view class="p-sm">
			<vi-collapse title="dataList 组节点格式" headClass="bgColor-contrast" boxClass="b-default">
				<view class="docSubTable">
					<view class="th">
						<view>属性名</view>
						<view>类型</view>
						<view>描述</view>
					</view>
					<view class="tr">
						<view>type</view>
						<view>String</view>
						<view>主题色。自定义组节点时有效</view>
					</view>
					<view class="tr">
						<view>color</view>
						<view>String</view>
						<view>自定义主题色。自定义组节点时有效</view>
					</view>
					<view class="tr">
						<view>radius</view>
						<view>String, Number, Array</view>
						<view>圆角。自定义组节点时有效</view>
					</view>
					<view class="tr">
						<view>plain</view>
						<view>Boolean</view>
						<view>镂空。自定义组节点时有效，默认不镂空</view>
					</view>
					<view class="tr">
						<view>name</view>
						<view>String</view>
						<view>同keys设置的groupName值(默认为name)，组节点标题。自定义组节点时有效</view>
					</view>
					<view class="tr">
						<view>children</view>
						<view>Array</view>
						<view>同keys设置的groupChildren值(默认为children)，子节点所在键名</view>
					</view>
				</view>
			</vi-collapse>
		</view>
		
		<view class="p-sm">
			<vi-collapse title="dataList 节点格式" headClass="bgColor-contrast" boxClass="b-default">
				<view class="docSubTable">
					<view class="th">
						<view>属性名</view>
						<view>类型</view>
						<view>描述</view>
					</view>
					<view class="tr">
						<view>type</view>
						<view>String</view>
						<view>主题色，作用于节点图标，和内容模板</view>
					</view>
					<view class="tr">
						<view>color</view>
						<view>String</view>
						<view>自定义主题色，作用于节点图标，和内容模板</view>
					</view>
					<view class="tr">
						<view>textColor</view>
						<view>String</view>
						<view>固定文字色，作用于节点图标，和内容模板</view>
					</view>
					<view class="tr">
						<view>radius</view>
						<view>String, Number, Array</view>
						<view>圆角，作用于节点图标</view>
					</view>
					<view class="tr">
						<view>plain</view>
						<view>Boolean</view>
						<view>镂空。作用于节点图标，默认镂空</view>
					</view>
					<view class="tr">
						<view>name</view>
						<view>String</view>
						<view>同keys设置的itemName值(默认为name)，节点标题</view>
					</view>
					<view class="tr">
						<view>time</view>
						<view>String, Number, Date</view>
						<view>同keys设置的itemTime值(默认为time)，节点时间值</view>
					</view>
				</view>
			</vi-collapse>
		</view>
		
		<view class="p-sm">
			<vi-collapse title="templateSet 模板参数" headClass="bgColor-contrast" boxClass="b-default">
				<view class="docSubTable">
					<view class="th">
						<view>属性名</view>
						<view>类型</view>
						<view>描述</view>
					</view>
					<view class="tr">
						<view>type</view>
						<view>String</view>
						<view>主题色，作用于标题</view>
					</view>
					<view class="tr">
						<view>color</view>
						<view>String</view>
						<view>自定义主题色，作用于标题</view>
					</view>
					<view class="tr">
						<view>textColor</view>
						<view>String</view>
						<view>固定文字色</view>
					</view>
					<view class="tr">
						<view>backgroundColor</view>
						<view>String</view>
						<view>模板背景色，默认#fff</view>
					</view>
					<view class="tr">
						<view>borderWidth</view>
						<view>String, number</view>
						<view>模板边框宽度，可带单位，默认单位px。默认1px</view>
					</view>
					<view class="tr">
						<view>borderColor</view>
						<view>String</view>
						<view>模板边框色，默认#eee</view>
					</view>
					<view class="tr">
						<view>borderType</view>
						<view>String</view>
						<view>模板边框类型，默认solid</view>
					</view>
					<view class="tr">
						<view>spaceInside</view>
						<view>String</view>
						<view>模板内边距，默认0.5em</view>
					</view>
					<view class="tr">
						<view>radius</view>
						<view>String</view>
						<view>模板圆角，默认0.5em</view>
					</view>
					<view class="tr">
						<view>shadow</view>
						<view>String</view>
						<view>模板阴影，默认无，格式同css的box-shadow</view>
					</view>
					<view class="tr">
						<view>useArr</view>
						<view>Boolean</view>
						<view>使用模板箭头角标，默认true。角标为css元素实现，不建议与阴影同时使用</view>
					</view>
				</view>
			</vi-collapse>
		</view>
		
		
		<view class="p-sm">
			<view class="py-sm">
				基本使用：{{`&lt;vi-timeline :value="tab值" :dataList="tab数据集">&lt;/vi-timeline>`}}
			</view>
			<view class="py-sm">
				<vi-timeline :dataList="dataList" groupMode="year"></vi-timeline>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList:[
					{time:1649844603000, name:"节点标题1"},
					{time:1618308603000, name:"节点标题2"},
					{time:1620900603000, name:"节点标题3", icon:"icon-checked", type:"second"},
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.response{
	display: if($useResponse, inline, none);
}
.noresponse{
	display: if($useResponse, none, inline);
}
</style>
